<template>
	<view class="">
		<view class="bgIndex" :style="{ '--bg-image': `url(${bgMessage})` }">
			<!-- <view :style="{ height: heightSystemss*2 + 'rpx' }"></view> -->

			<view class="search-content ">


				<image class="search-img" :src="search" mode=""></image>
				<input placeholder="请搜索用户名称" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
					style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />

			</view>
			

			<view class="messagesList ">
				<view class="flex-between margin-top_20rpx" @click="viewDetailsFn()"
					v-if="messageList">
					<view class="flex-start-center">
						<image class="avatar" :src="noMessage" mode=""></image>
						<view class="margin-left_20rpx">
							<view class="font-weight " style="margin-bottom: 10rpx;">
								系统消息
							</view>
							<view class=" font-overflow" style="max-width: 260rpx;" >
								<text style="margin-right: 10rpx;color: #999999;">{{messageList.title}}</text>


							</view>


						</view>
					</view>
					<view class="flex-column-end margin-right_16rpx">
						<view  class="margin-bottom_10rpx">

							<text>{{messageList.create_time}}</text>
						</view>
						<view class="news flex" v-if="notice_count!=0">

							<text>{{numberMessages(notice_count)}}</text>
						</view>
					</view>
				</view>
				<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
					@up="upCallback" :up="upOption" :down="downOption">
					<block v-for="(item,index) in list" :key="index">
						<l-swipeAction :options="options" @clickItem="clickItem($event, item.id)">
							<view class="flex-between margin-top_40rpx"
								@click="goChatFn(userInfo.id==item.receive_uid?item.uid:item.receive_uid)">

								<view class="flex-start-center">
									<image class="avatar" :src="userInfo.id==item.ru_id?item.avatar: item.ru_avatar"
										mode=""></image>
									<!-- <image class="avatar" src="../../static/第一行所有图标/矩形 141.png" mode=""></image> -->
									<view class="margin-left_20rpx">

										<view class="flex-start-center">
											<view class="font-weight font-overflow" style="max-width: 230rpx;">
												{{userInfo.id==item.ru_id?item.nickname:item.ru_nickname}}
											</view>
											<view class="flex-start-center margin-left_10rpx">

												<view class="male flex"
													v-if="(userInfo.id==item.ru_id?item.sex :item.ru_sex)==1">
													<image class="maleImg" :src="path25" mode="widthFix"></image>
													<text>{{userInfo.id==item.ru_id?item.age :item.ru_age}}</text>
												</view>
												<view class="female flex" v-else>
													<image class="femaleImg" :src="path69" mode="widthFix"></image>
													<text>{{userInfo.id==item.ru_id?item.age :item.ru_age}}</text>
												</view>
											</view>
										</view>
										<view class="font-overflow " style="max-width: 300rpx; margin-top: 14rpx;" v-if="item.message.type!='img'">
											<view
												style="margin-right: 10rpx;color: #666666;" v-html="item.message.content"></view>
										
										</view>
										<view class="font-overflow " style="max-width: 300rpx; margin-top: 14rpx;" v-else>
											<view
												style="color: #666666;" >[图片]</view>
										
										</view>

									</view>
								</view>

								<view class="flex-column-end ">
									<view style="" class="margin-bottom_10rpx margin-right_16rpx">

										<text style="font-size: 24rpx;color: #999999;">{{item.update_time}}</text>
									</view>
									<view class="news flex" v-if="item.message_count!=0">

										<text>{{numberMessages(item.message_count)}}</text>
									</view>
								</view>

							</view>
						</l-swipeAction>
					</block>

				</mescroll-body>
				<view style="height: 120rpx;">
					
				</view>

			</view>


		</view>
         
		<tqb-tabbar activeIndex="3" />
	</view>
</template>

<script>
	import tqbTabbar from '../../components/tqb-tabbar/tqb-tabbar.vue'
	export default {
		components: {
			tqbTabbar
		},
		data() {
			return {
				unitId: '',
				daziBg1:this.$api.daziBg1,
				bgMessage:this.$img.daziBg1,
				search: this.$img.search,
				path25: this.$img.path25,
				path69: this.$img.path69,
				noMessage:this.$img.noMessage,
				options: [{
					name: '删除',
					width: 150,
					background: '#ff395c',
					color: '#fff'
				}],
				userInfo: uni.getStorageSync("userInfo"),
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				windowHeight: 0,
				list: [],
				searchVal: '',
				count: '',
				messageList: [],
				notice_count: '',
				heightSystemss: 0

			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 1500;
				}
			});
			this.init()
			this.createdgetSystemInfo()
			this.basicConfigurationFn()


		},
		onShow() {
			
			this.basicConfigurationFn()
			this.$nextTick(() => {
				this.mescroll?.resetUpScroll();
				this.init()
			})
		},
		methods: {
			async basicConfigurationFn() {
				const result = await this.$http.post({
					url: this.$api.config,
					data: {


					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})
				if (result.code == 0) {
					console.log(result)

					this.unitId = result.data.advertisement_id

				}
			},
			createdgetSystemInfo() {
				let menuButtonObject = uni.getMenuButtonBoundingClientRect(); //获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点。
				uni.getSystemInfo({
					//获取系统信息
					success: res => {
						let navHeight = menuButtonObject.height + (menuButtonObject.top - res
							.statusBarHeight) * 2; //导航栏高度=菜单按钮高度+（菜单按钮与顶部距离-状态栏高度）*2
						this.heightSystemss = navHeight;
					},
					fail(err) {
						console.log(err);
					}
				});
			},
			clickItem(e, id) {
				console.log(e, id);

				this.removeChatFn(id)


			},
			async removeChatFn(uid) {
				const result = await this.$http.post({
					url: this.$api.removeChat,
					data: {

						id: uid



					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})


				if (result.code == 0) {
					this.$nextTick(() => {
						this.mescroll?.resetUpScroll();

					})
					this.$sun.toast(result.message, 'none')


				} else {
					this.$sun.toast(result.message, 'none')
				}
			},
			changeInput(e) {

				this.searchVal = e.detail.value
				this.mescroll?.resetUpScroll();
			},
			goChatFn(uid) {

				this.readChatMessageFn(uid)

			},
			async readChatMessageFn(uid) {
				const result = await this.$http.post({
					url: this.$api.readChatMessage,
					data: {

						uid: uid



					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})


				if (result.code == 0) {

					this.$sun.toast(result.message, 'none')
					this.$sun.navGo('/pagesB/index/HM-chat/HM-chat', {
						uid: uid
					})


				} else {
					this.$sun.toast(result.message, 'none')
				}
			},
			async init() {
				const result = await this.$http.post({
					url: this.$api.message,
					data: {
						page: 1,
						limit: 100,
						type: 1




					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})


				if (result.code == 0) {

					this.count = result.data.count
					this.messageList = result.data.list[0]
					console.log(this.messageList)



				} else {
					this.$sun.toast(result.message, 'none')
				}




				const res = await this.$http.post({
					url: this.$api.unReadMessage,
					data: {


					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})


				if (res.code == 0) {

					console.log(res.data.notice_count)
					this.notice_count = res.data.notice_count


				} else {
					this.$sun.toast(res.message, 'none')
				}
			},




			async upCallback(scroll) {

				const result = await this.$http.post({
					url: this.$api.chatList,
					data: {
						
						nickname: this.searchVal





					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})


				if (result.code == 0) {

					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];

					this.list = result.data.list





					console.log('this.list', this.list, this.list.length);
				} else {
					this.$sun.toast(result.message, 'none')
				}


			},
			viewDetailsFn() {
				this.readNoticeMessageFn()


			},
			async readNoticeMessageFn() {
				// 
				const resPoster = await this.$http.post({
					url: this.$api.readNoticeMessage,
					data: {

						type: 1,


					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (resPoster.code == 0) {
					console.log(resPoster)
					this.$sun.navGo('/pagesB/index/systemDetails')

				} else {

					this.$sun.toast(resPoster.message, 'none')
				}

			},
			async tabClassIfyFn() {
				console.log(this.userInfo.token)
				const resPoster = await this.$http.post({
					url: this.$api.tabList,
					data: {

						type: 3,
						// pid:0,
						top: 1

					},
					headers: {
						'Authorization': this.userInfo.token
					}

				})

				if (resPoster.code == 0) {
					console.log(resPoster)
					this.tabsList = resPoster.data.list
					if (resPoster.data.list.length) {
						this.son_tab = resPoster.data.list[0].id
					}
					this.tabs = resPoster.data.list.slice(0, 5).map((item) => {
						return item.name;
					});
					this.$nextTick(() => {
						this.mescroll?.resetUpScroll();
					})

				} else {

					this.$sun.toast(resPoster.message, 'none')
				}
			},
			// unReadMessage


		},
		computed: {
			numberMessages: function() {
				return function(num) {

					if (num > 99) {

						return String(99) + '+';
					} else {

						return String(num);
					}
				};
			}
		},
	}
</script>

<style lang="less" scoped>
	page{
		background: #ffffff !important;
	}
	.bgIndex {
		background-repeat: no-repeat;
		background-size: cover;
		background-image: (var(--bg-image));
		// height: 100vh;
		padding: 30rpx 30rpx 0;


		.search-content {
			margin-bottom: 20rpx;
			// justify-content: center;
			display: flex;
			align-items: center;
			// margin: 20rpx;
			height: 76rpx;

			background: rgb(246, 248, 255);
			;
			border-radius: 84rpx;


			.search-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
				margin-left: 20rpx;
			}

			.address-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
				margin-left: 20rpx;
			}

			.icon_close {
				padding: 0rpx 15rpx;
				width: 36rpx;
				height: 36rpx;
				margin-right: 30rpx;
			}

		}

	}

	.messagesList {
		
		.avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
		}

		.female {
			width: 90rpx;
			height: 36rpx;
			border-radius: 20rpx;
			color: #fff;
			background: #FA5799;

			.femaleImg {
				width: 18rpx;
				
				margin-right: 10rpx;
			}
		}

		.male {
			width: 90rpx;
			height: 36rpx;
			border-radius: 20rpx;
			color: #fff;
			background: rgb(1, 145, 255);

			.maleImg {
				width: 18rpx;
				margin-right: 10rpx;
			}
		}

		.news {
			width: 45rpx;
			height: 45rpx;
			background-color: red;
			border-radius: 50%;
			color: #fff;
		}

	}
</style>